<style lang="less">
  @import '../styles/common.less';
  @import 'index.less';
  @import '../tables/components/table.less';
</style>

<template>
  <div>
    <Row :gutter="10">
      <Card>
        <div class="table-head">
          <Button type="primary" class="Button" @click="add()">创建群组</Button>
        </div>
        <Row class="margin-top-10">
          <Table stripe border :columns="columns" :data="data" @on-row-click="onRowData"></Table>
        </Row>
      </Card>
      <Modal :width="600" title="详情"
             v-model="showCurrentTableData"
             ok-text="发消息"
             cancel-text="取消"
             @on-ok="toChatPage()"
             @on-cancel=""
             class-name="vertical-center-modal"
             class="Modal-Detail-div">
        <Form label-position="top">
          <FormItem label="群名称">
            <div class="dataDetail-div" v-text="dataDetail.name"></div>
          </FormItem>
          <FormItem label="群号">
            <div class="dataDetail-div" v-text="dataDetail.no"></div>
          </FormItem>
          <FormItem label="群主">
            <div class="dataDetail-div">
              <Tag color="default" v-if="dataDetail.owner && dataDetail.owner.name"
                   v-text="dataDetail.owner.name"></Tag>
            </div>
          </FormItem>
          <FormItem label="群管理员">
            <div class="dataDetail-div">
              <Tag color="default" v-for="(el,index) in dataDetail.admins" :key="'admins' + index"
                   v-text="el.name"></Tag>
            </div>
          </FormItem>
          <FormItem label="群成员">
            <div class="dataDetail-div">
              <Tag color="default" v-for="(el,index) in dataDetail.members" :key="'members' + index"
                   v-text="el.name"></Tag>
            </div>
          </FormItem>
        </Form>
      </Modal>
      <!--建群-->
      <Modal v-model="addgroupModal" :closable='false' :mask-closable=false :width="600" class="Modal-Detail-div">
        <h3 slot="header" style="color:#2D8CF0">创建群组</h3>
        <Form label-position="top">
          <FormItem label="群名称">
            <Input v-model="addTeam.addTeamName" placeholder="请输入群名称"></Input>
          </FormItem>
        </Form>
        <Tree ref="user_tree" :data="TreeData" show-checkbox multiple></Tree>
        <div slot="footer">
          <Button type="text" @click="cancelgroupModal">取消</Button>
          <Button type="primary" :loading="saveLoading" @click="savegroupModal">保存</Button>
        </div>
      </Modal>
    </Row>
  </div>
</template>

<script>
  import Cookies from 'js-cookie';
  import Util from '../../libs/util';
  import util from '@/libs/util.js';
  import Utils from '../../libs/mod.utils';
  import String from '../../libs/mod.string';
  import Modal from '../../libs/mod.Modal';
  import Nim from '../../libs/mod.nim';
  export default {
    data () {
      return {
        TableHeight: 300,
        spanList: 18,
        saveLoading: false,
        showDetail: false,
        total: 0,
        page: 1,
        size: 10,
        id: '',
        showCurrentTableData: false,
        columns: [
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          {
            key: 'no',
            title: '群号',
          },
          {
            key: 'name',
            title: '群名称',
          },
          {
            title: 'Action',
            key: 'action',
            width: 150,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: e => {
                      e.stopPropagation();
                      var data = params.row;
                      this.toChatPageData(data);
                    }
                  }
                }, '发消息')
              ]);
            }
          }
        ],
        data: [],
        dataDetail: {},
        addgroupModal: false,
        addTeam: {
          addTeamName: '',
        },
        TreeData: [],
      };
    },
    computed: {},
    mounted () {
      var _this = this;
      _this.getData();
    },
    methods: {
      getData: function (id) {
        var _this = this;
        var data = {
          uid: Util.toJson(localStorage.getItem('userInfo')).id,
        };
        var params = {
          url: '/chat/group/list',
          type: Util.method.get,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            var data = res.data || [];
            _this.data = data;
          } else {
            _this.$Message.error('查询群组信息失败!');
          }
        }
      },
      onRowData: function (data, index) {
        var _this = this;
        var id = data.id;
        _this.id = id;
        var data = {
          uid: Util.toJson(localStorage.getItem('userInfo')).id,
          id: id,
        };
        var params = {
          url: '/chat/group/query',
          type: Util.method.get,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            var data = res.data || [];
            _this.dataDetail = data;
            _this.showCurrentTableData = true;
          } else {
            _this.$Message.error('查询群组信息失败!');
          }
        }
      },
      heid_dataDetail: function () {
        var _this = this;
        _this.showCurrentTableData = false;
      },
      toChatPageData: function (_data) {
        var _this = this;
        _this.dataDetail = _data;
        _this.toChatPage();
      },
      // 跳转到聊天页面
      toChatPage: function () {
        var _this = this;
        var name = _this.dataDetail.name;
        var no = _this.dataDetail.no;
        sessionStorage.setItem('sid2chat', 'team-' + no);
        sessionStorage.setItem('name2chat', name);
        util.openNewPage(_this, 'chats_index');
        _this.$router.push({
          name: 'chats_index'
        });
      },
      // 显示创建群组
      add: function () {
        var _this = this;
        _this.addTeam.addTeamName = '';
        _this.getTreeData();
        _this.addgroupModal = true;
      },
      cancelgroupModal: function () {
        var _this = this;
        _this.addgroupModal = false;
      },
      // 建群
      savegroupModal: function () {
        var _this = this;
        var CheckedNodes = _this.$refs.user_tree.getCheckedNodes();
        if (_this.addTeam.addTeamName == '') {
          _this.$Message.error('请输入群名称!');
          return false;
        }
        if (CheckedNodes.length == 0) {
          _this.$Message.error('请选择人员!');
          return false;
        }
        var depArr = [];
        var userArr = [];
        var usernameArr = [];
        for (var k in CheckedNodes) {
          if (!CheckedNodes[k]) {
            continue;
          }
          var id = CheckedNodes[k].id;
          var username = CheckedNodes[k].username || '';
          var type = CheckedNodes[k].type;
          if (type == 'dep') {
            depArr.push(id);
          } else if (type == 'user') {
            userArr.push(id);
            usernameArr.push(username);
          }
        }
        var data = {
          uid: Util.toJson(localStorage.getItem('userInfo')).id,
          name: _this.addTeam.addTeamName,
          users: userArr,
          admins: [],
          departments: depArr,
        };
        var params = {
          url: '/chat/group/add',
          type: Util.method.get,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        _this.saveLoading = true;
        function _successFun(res) {
          _this.saveLoading = false;
          if (res.result == 0) {
            var data = res.data || [];
            var id = data.id;
            var no = data.no;
            var name = data.name;
            var data_usersObj = Nim.getUsersObj();
            if (!data_usersObj[no]) {
              data_usersObj[no] = {
                id: '',
                no: no,
                name: '',
                image: ''
              };
            }
            data_usersObj[no].id = id;
            data_usersObj[no].name = name;
            Nim.setUsersObj(data_usersObj);
            _this.getData();
            _this.addgroupModal = false;
          } else {
            _this.$Message.error('创建群组失败!');
          }
        }
      },
      // 获取选人 树信息
      getTreeData: function () {
        var _this = this;
        var data = {
          uid: Util.toJson(localStorage.getItem('userInfo')).id,
          id: 1
        };
        var params = {
          url: '/department/query',
          type: Util.method.get,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            var data = res.data || [];
            var TreeData = [];
            TreeData.push(data);
            _this.toDataFun(TreeData);
            _this.TreeData = TreeData;
          } else {
            _this.$Message.error('查询人员信息失败!');
          }
        }
      },
      // 处理树信息
      toDataFun: function (arr) {
        var _this = this;
        arr.forEach(function (e) {
          e.title = e.name;
          e.expand = true;//展开
          if (e.type) {
            e.type = 'dep';
          } else {
            e.type = 'user';
          }
          var staff = e.staff || [];
          var children = e.children || [];
          if (children.length == 0) {
            e.children = [];
          }
          e.children.push(...staff);
          _this.toDataFun(e.children);
        });
      },


    }
  };
</script>

<style>

</style>
